<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>vue组件</title>
  <script type="text/javascript" src="js/vue.min.js"></script>
  <style type="text/css">
    .zf-taost {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.7);
      padding: 4px 8px;
      border-radius: 4px;
      color: #fff;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <button @click="showToast">显示提示</button>

    全选和反选 <input type="checkbox" v-model="checkAll" />
    <hr />
    <input type="checkbox" v-for="(item, index) of checks" v-model="item.checked" />

  </div>
  <script type="text/javascript">

  const obj = {
    template: `<div>{{msg}}</div>`,
    data() {
      return {
        msg: 'hello vue'
      }
    }
  };



  const Toast = (function () {
    let opt = {
      message: '登记卡'
    }

    return function(options) {
      if(typeof options === 'string') {
        opt.message = options
      } else if(options && typeof options === 'object') {
        opt = Object.assign(opt, options)
      }
      const toastObj = {
        data(){
          return opt;
        },
        template: '<div class="zf-taost">{{message}}</div>'
      }
      const objCom = Vue.extend(toastObj);
      const el = new objCom().$mount().$el;



      document.body.appendChild(el);

      let timer = setTimeout(() => {
        document.body.removeChild(el);
        clearTimeout(timer);
      }, 2000)
    }
  })()

  Toast.install = function(Vue, options) {
    Vue.prototype.$toast = Toast;
  }


    Vue.use(Toast);

    let vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        obj: {a: 1},
        checks: [{checked: true, id: 1}, {checked: false, id: 2}, {checked: false, id: 3}]
      },
      methods: {
        showToast() {
          this.$toast('贺卡的')
        },
        fn() {
          console.log("0000", this.msg);
        }
      },
      computed: {
        checkAll: {
          get() {
            return this.checks.every(item => item.checked)
          },
          set(val) {
            this.checks.forEach(item => {
              item.checked = val;
            })
          }
        }
      },
      watch: {
        msg: [
          'fn'
        ],
        obj: {
          handler(newVal, oldVal) {
            console.log(newVal);
          },
          deep: true
        }
      }
    })
    console.dir(vm)
    setTimeout(function() {
      vm.msg = '908',
      vm.obj.a = 20;
    }, 1000);
  </script>
</body>
</html>